<template>
  <div
    class="h-input"
    :class="{
      [`h-input--${size}`]: size,
      [`h-input--${type}`]: type,
      'is-disabled': disabled,
      'is-prepend': $slots.prepend,
      'is-append': $slots.append,
      'is-prefix': $slots.prefix,
      'is-suffix': $slots.suffix,
      'is-focus': isFocus,
    }"
  >
    <!-- input -->
    <template v-if="type != 'textarea'">
      <!-- prepend -->
      <div v-if="$slots.prepend" class="h-input__prepend">
        <slot name="prepend"></slot>
      </div>
      <!-- input -->
      <div class="h-input__wrapper">
        <!-- prefix -->
        <span v-if="$slots.prefix" class="h-input__prefix">
          <slot name="prefix"></slot>
        </span>
        <!-- input -->
        <input
          :type="showPassword ? (passwordVisible ? 'text' : 'password') : type"
          class="h-input__inner"
          v-model="inputModel"
          v-bind="$attrs"
          ref="inputRef"
          :disabled
          :readonly
          :autocomplete="autocomplete"
          :placeholder="placeholder"
          :autofocus
          :form="form"
          @change="changeFun"
          @focus="focusFun"
          @blur="blurFun"
          @input="inputFun"
        />
        <!-- suffix -->
        <span
          v-if="$slots.suffix || showClear || showEye"
          class="h-input__suffix"
          @click="keepFocus"
          @mousedown.prevent="TIP"
        >
          <slot name="suffix"> </slot>
          <h-icon
            icon="circle-xmark"
            v-if="showClear"
            class="v-input__clear"
            @click="clearText"
          >
          </h-icon>
          <h-icon
            icon="eye-slash"
            v-if="showEye && !passwordVisible"
            class="v-input__password"
            @click="togglePasswordVisible"
          >
          </h-icon>
          <h-icon
            icon="eye"
            v-if="showEye && passwordVisible"
            class="v-input__password"
            @click="togglePasswordVisible"
          >
          </h-icon>
        </span>
      </div>
      <!-- append -->
      <div v-if="$slots.append" class="h-input__append">
        <slot name="append"></slot>
      </div>
    </template>
    <!-- textarea -->
    <template v-else>
      <textarea
        class="h-textarea__wrapper"
        v-model="inputModel"
        v-bind="$attrs"
        ref="inputRef"
        :disabled
        :readonly
        :autocomplete="autocomplete"
        :placeholder="placeholder"
        :autofocus
        :form="form"
        @change="changeFun"
        @focus="focusFun"
        @blur="blurFun"
        @input="inputFun"
      ></textarea>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, ref } from "vue";
import type { Ref } from "vue";
import type { InputProps, InputEmits } from "./types";
import HIcon from "../Icon/HIcon.vue";

const {
  type = "text",
  disabled = false,
  clearable = false,
  showPassword = false,
  autocomplete = "off",
  readonly = false,
  autofocus = false,
} = defineProps<InputProps>();
defineOptions({
  inheritAttrs: false,
});
const inputModel = defineModel<string>();
const emits = defineEmits<InputEmits>();
const isFocus = ref(false);
const passwordVisible = ref(false);
const inputRef = ref() as Ref<HTMLInputElement>;

const showClear = computed(
  () => isFocus.value && !disabled && !!inputModel.value && clearable
);

const showEye = computed(() => showPassword && !!inputModel.value && !disabled);

const TIP = () => {};

const keepFocus = async () => {
  // DOM 还未更新
  inputRef.value.setSelectionRange(
    inputRef.value.value.length,
    inputRef.value.value.length
  );
  console.log(inputRef.value.selectionStart);
  console.log(inputRef.value.selectionEnd);
  await nextTick();
  inputRef.value.focus();
  inputRef.value.setSelectionRange(
    inputRef.value.value.length,
    inputRef.value.value.length
  );
  console.log(inputRef.value.selectionStart);
  console.log(inputRef.value.selectionEnd);
};

const inputFun = () => {
  emits("input", inputModel.value!);
};

const changeFun = () => {
  emits("change", inputModel.value!);
};

const focusFun = (e: FocusEvent) => {
  isFocus.value = true;
  emits("focus", e);
};

const blurFun = (e: FocusEvent) => {
  isFocus.value = false;
  emits("blur", e);
};

const clearText = () => {
  inputModel.value = "";
  emits("clear");
};

const togglePasswordVisible = () => {
  passwordVisible.value = !passwordVisible.value;
};

defineExpose({
  ref: inputRef,
});
</script>

<style scoped></style>
